<template>
  <div class="shop-container">
    <div class="header">
      <div class="top">
        <div class="user">
          <img class="avatar" src="../../assets/image/avatar.png" alt="" />
          <span class="username">租币当钱花</span>
        </div>
        <div class="rule">
          <van-icon name="question-o" />
          规则
        </div>
      </div>
      <div class="content">
        <div class="left">
          <div class="note">可用租币</div>
          <div class="money">1560</div>
        </div>
        <div class="right">
          <button @click="router.push('/')">
            <img class="btn-icon" src="../../assets/image/icon5.png" alt="" />去赚租币<van-icon
              name="arrow"
            />
          </button>
        </div>
      </div>
    </div>
    <CardList></CardList>
    <div class="shop">
      <div class="top">
        <div class="title">兑换商城 <van-icon name="question-o" /></div>
        <div class="record">兑换记录<van-icon name="arrow" /></div>
      </div>
      <div class="filter">
        <div
          class="filter-item"
          :style="{
            background: activeKey === item.key ? `rgba(255, 0, 0, 0.1)` : '#fff',
            color: activeKey === item.key ? '#f66735' : '#9e9e9e'
          }"
          v-for="item in priceFilter"
          :key="item.key"
          @click="activeTab(item)"
        >
          {{
            `${item.scope.length === 2 ? `${item.scope[0]} - ${item.scope[1]}` : item.scope[0] === 0 ? '全部' : `${item.scope[0]}以上`}`
          }}
        </div>
      </div>
    </div>
    <Product></Product>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CardList from './components/CardList.vue'
import Product from '@/components/Product.vue'
import router from '@/router'

interface PriceFilterItem {
  key: string
  scope: number[]
}
const priceFilter: PriceFilterItem[] = [
  {
    key: crypto.randomUUID(),
    scope: [0]
  },
  {
    key: crypto.randomUUID(),
    scope: [1, 100]
  },
  {
    key: crypto.randomUUID(),
    scope: [100, 500]
  },
  {
    key: crypto.randomUUID(),
    scope: [500, 5000]
  },
  {
    key: crypto.randomUUID(),
    scope: [5000]
  }
]

const activeKey = ref<string>(priceFilter[0].key)
const activeFilter = ref<number[]>(priceFilter[0].scope)
const activeTab = (item: PriceFilterItem) => {
  activeKey.value = item.key
  activeFilter.value = item.scope
}
</script>

<style scoped lang="less">
.shop-container {
  background-color: #f1f6f4;
  .header {
    height: 160px;
    background: linear-gradient(to right, #ff8639, #ff621c);
    border-radius: 0 0 30px 30px;
    padding: 10px 15px;

    .top {
      display: flex;
      justify-content: space-between;

      .user {
        height: 40px;
        display: flex;
        align-items: center;
        .avatar {
          width: 40px;
          height: 40px;
          margin-right: 6px;
        }
        .username {
          // 背景白色透明
          height: 14px;
          padding: 5px;
          font-size: 14px;
          line-height: 14px;
          color: #ffe5c9;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 2px;
        }
      }
      .rule {
        font-size: 15px;
        color: #ffe5c9;
        height: 40px;
        line-height: 40px;
      }
    }

    .content {
      display: flex;
      align-items: center;
      .left {
        flex: 1;
        text-align: left;
        .note {
          font-size: 13px;
          color: #ffeeca;
          margin: 10px 5px;
        }
        .money {
          color: #fffffc;
          font-size: 38px;
        }
      }
      .right {
        flex: 1;
        display: flex;
        justify-content: flex-end;
        button {
          width: 120px;
          height: 40px;
          border: none;
          border-radius: 25px;
          color: #9b5d04;
          background: linear-gradient(to top, #fefcb3, #fef7d9);
          display: flex;
          align-items: center;
          margin-top: 10px;
        }

        .btn-icon {
          width: 20px;
          margin: 0 3px 0 4px;
        }
      }
    }
  }

  .shop {
    height: 60px;
    background: linear-gradient(to bottom, #fff, #f6f8fa);
    margin-top: 20px;
    padding: 20px 20px 0 20px;
    border-radius: 30px 30px 0 0;

    .top {
      display: flex;
      justify-content: space-between;
      .title {
        font-size: 17px;
        font-weight: 700;
      }
      .record {
        font-size: 15px;
        color: #9e9e9e;
      }
    }

    .filter {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;

      .filter-item {
        border: 1px solid #e5e5e5;
        padding: 4px 8px;
        border-radius: 20px;
        font-size: 13px;
        color: #9e9e9e;
        text-align: center;
      }
    }
  }
}
</style>
